<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.transit.min.js"></script>
        <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
    </head>
    <body>
        <div id="placeholder"></div>
        <div id="main_container"> 
            <div id="target" data-hover="0"> <span class="menu-title"> come </span> <div id="menu"> <ul id="dropdown"> 
                        <li> Item 1 </li>
                        <li> Item 2 </li>
                        <li> Item 3 </li>
                        <li> Item 4 </li>
                        <li> Item 5 </li>
                    </ul> </div> </div>
            <div id="route"> </div>
        </div>

        <script>
            $.fn.addRadius = function() {
                var percent = 0.25;
                var w = this.outerWidth();
                var h = this.outerHeight();
                var x = this.position().left + w / 2;
                var y = this.position().top + h / 2;
                var container = this.parent();

                var max = Math.sqrt(w * w + h * h);
                var r = max / 2 * (1 + percent);
                $('<div>').css({
                    width: 2 * r,
                    height: 2 * r,
                    'margin-left': -r,
                    'margin-top': -r,
                    'border-radius': r,
                    top: y,
                    left: x
                }).addClass('radius').appendTo(container);
                return this.attr({'data-radius': r, 'data-center': x + ',' + y});
            };

            $.fn.isIntersected = function(other) {
                if (!this.attr('data-radius') && !other.attr('data-radius')) {
                    alert('data radius is not given');
                }

                var r1 = parseInt(this.attr('data-radius')),
                        c1 = this.attr('data-center').split(','),
                        r2 = parseInt(other.attr('data-radius')),
                        c2 = other.attr('data-center').split(',');
                var d2 = Math.sqrt(Math.pow(c1[0] - c2[0], 2) + Math.pow(c1[1] - c2[1], 2));
                //console.log((r1 + r2 > d2) ? (r1 + r2 - d2) / (r1 + r2) : false);
                return (r1 + r2 > d2) ? (r1 + r2 - d2) / (r1 + r2) : false;

            };

            function drawCircles(d) {
                if (d) {
                    $('.radius, #route').show();
                } else {
                    $('.radius, #route').hide();
                }
            }


            $().ready(function() {

                var vx = 0, vy = 0, v = {x: 0, y: 0, r: 0, t: 0}, x, y, vr = 0, r, t = 25;
                var target = $('#target').addRadius();
                var route = $('#route').attr('data-radius', parseInt($('#route').css('border-radius')) * $('#route').outerWidth() / 100);


                    var tx = $('#target').position().left + $('#target').outerWidth() / 2;
                    var ty = $('#target').position().top + $('#target').outerHeight() / 2;
                    $('#main_container').mousemove(function(e) {
                        if (x && y) {
                            v.x = v.x * 0.7 + (e.pageX - x) * 0.3,
                                    v.y = v.y * 0.7 + (e.pageY - y) * 0.3;
                        }

                        x = e.pageX,
                                y = e.pageY;


                        tx = tx * 0.7 + (x + v.x * t) * 0.3,
                                ty = ty * 0.7 + (y + v.y * t) * 0.3;


                        //console.log(v.y);

                        route.attr('data-center', tx + ',' + ty).transition({x: tx, y: ty}, 0);
                        var isct = route.isIntersected(target);
                        if (isct) {
                            var dh = parseFloat(target.attr('data-hover')) + isct*0.1;
                            if (dh > 1) {
                                target.addClass('hover');
                                if (dh > 2) {
                                    dh = 2;
                                }
                            }
                            target.attr('data-hover', dh);

                            if (!target.attr('data-timer')) {
                                var timer = setInterval(function() {
                                    var dh = parseFloat(target.attr('data-hover')) - 0.25;
                                    if (dh < 0) {
                                        dh = 0;
                                        clearInterval(timer);
                                        target.removeAttr('data-timer').removeClass('hover');
                                    }
                                    target.attr('data-hover', dh);
                                    //console.log(target.attr('data-hover'));
                                }, 80);

                                target.attr('data-timer', timer);
                            }
                            route.css('border-color', 'tomato');
                        } else {
                            route.css('border-color', '');
                        }

                        /*dx = tx - x;
                         dy = ty - y;
                         if (r) {
                         vr = r - Math.sqrt(dx * dx + dy * dy);
                         //console.log(x, y);
                         distance.push([count++, vr]);
                         }
                         r = Math.sqrt(dx * dx + dy * dy);
                         */



                    });

                $('#target').mouseenter(function() {
                    //console.log(distance);
                    r = null;
                });
            });
        </script>
    </body>
</html>
